<script lang="ts" setup>
import {ref} from "vue"
import {useRouter} from 'vue-router'
import {arle, getUserInfo, guess} from "../serve"
const
    router = useRouter(),
    count = ref(1),
    itemFlow = ref([]),
    itemAle = ref([]),
    loadF = ref(true),
    loadA = ref(true)
;
setInterval(() => {
  if (count.value == 3) {
    count.value = 1
    return
  }
  count.value++
}, 5000)
function get() {
  guess().then((r:any)=>{
    const length = r.length > 4 ? 4 : r.length
    for(let i = 0 ; i < length; i++){
      itemFlow.value.push(r[i])
      loadF.value = false
    }
  })
  arle({page:1,size:8}).then((r:any)=>{
    itemAle.value = r['list']
    loadA.value = false
    // console.log(r['list'])
  })
}
get()
</script>

<template>
  <el-scrollbar v-loading="loadF || loadA" element-loading-text="加载中...">
    <div carosello>
      <img :src="'/carosello' + count + '.png'" alt="">
      <div cerchio>
        <div v-for="i in 3" :key="i" :class="{bg:i == count}" count style="cursor: pointer" @click="count = i"/>
      </div>
    </div>
    <div flower-info>
      <div top>
        <div left>鲜花信息</div>
        <div right @click="router.push({path:'/info'}).catch(()=>true)">
          更多
          <el-icon icon>
            <ArrowRight/>
          </el-icon>
        </div>
      </div>
      <div ifD>
        <div v-for="(i,index) in itemFlow" :key="index" idy @click="router.push({path:'/info-details',query:{id:i['id']}}).catch(()=>true)">
          <img alt="" image :src="i['image']"/>
          <div>{{ i['storeName'] }}</div>
          <div dy>
            <span span @click.stop="()=>{}">立即下单</span>
            <span>{{ '¥&nbsp;' + i['price'] }}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 10px;background-color: #F5F5F5;"/>
    <div flower-info>
      <div top>
        <div left>鲜花资讯</div>
        <div right @click="router.push({path:'/infoTon'}).catch(()=>true)">
          更多
          <el-icon icon>
            <ArrowRight/>
          </el-icon>
        </div>
      </div>
      <div zxd>
        <div v-for="(i,index) in itemAle" :key="index" zxy @click="router.push({path:'/infoTon-details',query:{id:i['id']}}).catch(()=>true)">
          <img alt="" left :src="JSON.parse(i['imageInput']).length > 1 ? JSON.parse(i['imageInput'])[0] : JSON.parse(i['imageInput'])"/>
          <div right>
            <div Title>{{ i['title'] }}</div>
            <div ti-right>
              查看详情
              <el-icon icon>
                <ArrowRight/>
              </el-icon>
            </div>
            <div text>{{i['synopsis']}}</div>
            <div tim>{{'发布时间：' + i['createTime']}}</div>
          </div>
          <div line/>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 300px"/>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[carosello] {
  text-align: center;
  position: relative;

  img {
    width: 100%;
    height: 58vh;
  }

  [cerchio] {
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    bottom: 0;
    height: 40px;
  }

  [count] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #CFD3D2;
    margin-left: 20px;
  }

  .bg {
    background-color: #FA9BB6;
  }
}

[flower-info] {
  [top] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    color: #2c2c2c;

    [left] {
      font-size: 18px;
      margin-left: 45px;
      flex: 1;
    }

    [right] {
      cursor: pointer;
      color: #666666;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 30px;

      [icon] {
        margin-left: 5px;
      }
    }
  }

  [ifD] {
    display: flex;
    justify-content: center;
    margin: 0 40px;

    [idy] {
      cursor: pointer;
      margin: 30px 40px;
      width: 300px;

      [image] {
        width: 300px;
        height: 300px;
        border-radius: 10px;
      }

      [span] {
        border-radius: 6px;
        padding: 6px;
        border: 1px solid #666;
        margin-right: 5px;
        font-size: 10px;
      }

      [dy] {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }

  [zxd] {
    margin: 20px 30px;

    [zxy] {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      margin-bottom: 30px;
      position: relative;

      [line] {
        width: 100%;
        background-color: #9A9A9D;
        position: absolute;
        top: 0;
        height: 1px;
      }

      [left] {
        width: 300px;
        height: 300px;
      }

      [right] {
        text-align: left;
        flex: 1;
        margin-left: 100px;

        [Title] {
          font-size: 20px;
        }

        [ti-right] {
          position: absolute;
          top: 30px;
          right: 0;
          color: #666666;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 30px;
          font-size: 12px;
          [icon] {
            margin-left: 5px;
          }
        }

        [text]{
          margin-top: 80px;
          overflow:hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        [tim]{
          position: absolute;
          bottom: 0;
        }

      }
    }
  }
}
</style>